<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts && showNum != 0" :width="'100%'" :height="height" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";

import { deviceStat } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: "351px"
  },
  showNum: {
    type: Number,
    default: 1
  },
  chartValue: {
    type: Object,
    default: () => {}
  },
  charttitle: {
    type: String,
    default: ""
  }
});
import { gradients } from "@/api/doubleCarbonManage/chartscolor";
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);
const getoptions = () => {
  isShowEcharts.value = true;
  option.value = {
    title: {
      text: props.charttitle,
      left: "center"
    },
    grid: {
      left: "20px",
      top: "60px",
      right: "10px",
      bottom: "10px",
      containLabel: true
    },
    // legend: {},
    tooltip: {
      trigger: "item"
    },
    legend: {
      top: "23",
      type: "scroll",
      width: "100%"
    },
    label: {
      formatter: "{b}: {d}%"
    },
    series: [
      {
        data: props.chartValue.map(item => {
          return {
            name: item.category,
            value: item.carbonEmission
          };
        }),
        type: "pie",
        name: props.charttitle,
        emphasis: {
          focus: "series"
        },
        radius: "60%",
        itemStyle: {
          normal: {
            color: function (params) {
              var colorList = gradients;
              return colorList[params.dataIndex];
            }
          }
        }
      }
    ]
  };
};
watch(
  () => props.chartValue,
  newOption => {
    console.log(newOption);
    getoptions();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
